<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wa-sqlite contention</title>
  <style>
    #start {
      font-size: 14pt;
      margin-top: 1em;
    }

    pre {
      display: block;
      margin: 0;
      text-wrap: wrap;
    }

    .setup-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1em;
    }

    .setup {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    #output {
      margin-top: 1em;
    }
  </style>
  <script src="contention.js" type="module"></script>
</head>
<body>
  <h1>wa-sqlite contention test  <button id="reset">Restore defaults</button></h1>

  <div class="setup-container">
    <div class="setup">
      <span>Global init</span>
      <textarea id="global" rows="4" cols="60"></textarea>
    </div>
    <div class="setup">
      <span>Connection init</span>
      <textarea id="connection" rows="4" cols="60"></textarea>
    </div>
    <div class="setup">
      <span>Writer task</span>
      <textarea id="writer" rows="4" cols="60"></textarea>
    </div>
    <div class="setup">
      <span>Reader task</span>
      <textarea id="reader" rows="4" cols="60"></textarea>
    </div>
  </div>
  <button id="start">Start</button>
  <span id="demo"></span>

  <div id="output"></div>
</body>
</html>